<!DOCTYPE html>
<html>
<head>
  <title>Rate Distribution Curve</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      background-color: white;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="physics-graph" width="500" height="420"></canvas>
  <script>
    const canvas = document.getElementById('physics-graph');
    const ctx = canvas.getContext('2d');

    // Define coordinates and scale
    const originX = 70;
    const originY = 360;
    const v0_unit = 140;
    const A_unit = 220;

    // Coordinates of key points
    const pO = { x: originX, y: originY };
    const pV0_on_axis = { x: originX + v0_unit, y: originY };
    const p2V0_on_axis = { x: originX + 2 * v0_unit, y: originY };
    const pA_on_axis = { x: originX, y: originY - A_unit };
    
    const pV0_A = { x: pV0_on_axis.x, y: pA_on_axis.y };
    const p2V0_A = { x: p2V0_on_axis.x, y: pA_on_axis.y };

    // --- Drawing ---

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // Draw Axes
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    const axisMargin = 40;
    // X-axis
    ctx.moveTo(pO.x, pO.y);
    ctx.lineTo(p2V0_on_axis.x + axisMargin, pO.y);
    // Arrowhead for X-axis
    ctx.moveTo(p2V0_on_axis.x + axisMargin, pO.y);
    ctx.lineTo(p2V0_on_axis.x + axisMargin - 10, pO.y - 5);
    ctx.moveTo(p2V0_on_axis.x + axisMargin, pO.y);
    ctx.lineTo(p2V0_on_axis.x + axisMargin - 10, pO.y + 5);
    // Y-axis
    ctx.moveTo(pO.x, pO.y);
    ctx.lineTo(pO.x, pA_on_axis.y - axisMargin);
    // Arrowhead for Y-axis
    ctx.moveTo(pO.x, pA_on_axis.y - axisMargin);
    ctx.lineTo(pO.x - 5, pA_on_axis.y - axisMargin + 10);
    ctx.moveTo(pO.x, pA_on_axis.y - axisMargin);
    ctx.lineTo(pO.x + 5, pA_on_axis.y - axisMargin + 10);
    ctx.stroke();

    // Draw Dashed Lines
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 1;
    // Horizontal dashed line from Y-axis to (v0, A)
    ctx.moveTo(pA_on_axis.x, pA_on_axis.y);
    ctx.lineTo(pV0_A.x, pV0_A.y);
    // Vertical dashed line at v0
    ctx.moveTo(pV0_on_axis.x, pV0_on_axis.y);
    ctx.lineTo(pV0_A.x, pV0_A.y);
    // Vertical dashed line at 2v0
    ctx.moveTo(p2V0_on_axis.x, p2V0_on_axis.y);
    ctx.lineTo(p2V0_A.x, p2V0_A.y);
    ctx.stroke();

    // Draw the main graph line
    ctx.beginPath();
    ctx.setLineDash([]); // Reset to solid line
    ctx.lineWidth = 2;
    ctx.moveTo(pO.x, pO.y);
    ctx.lineTo(pV0_A.x, pV0_A.y);
    ctx.lineTo(p2V0_A.x, p2V0_A.y);
    ctx.stroke();

    // Draw Labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Axis labels
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('O', pO.x - 15, pO.y + 15);
    ctx.fillText('v', p2V0_on_axis.x + axisMargin + 10, pO.y);
    ctx.fillText('f(v)', pO.x + 5, pA_on_axis.y - axisMargin - 15);

    // Tick labels
    ctx.font = '20px Times New Roman'; // Non-italic for A, v0, 2v0
    ctx.fillText('A', pA_on_axis.x - 20, pA_on_axis.y);
    
    ctx.textBaseline = 'top';
    ctx.fillText('v\u2080', pV0_on_axis.x, pV0_on_axis.y + 8);
    ctx.fillText('2v\u2080', p2V0_on_axis.x, p2V0_on_axis.y + 8);
    
    // Draw caption
    ctx.font = '22px SimSun'; // Specific font for Chinese characters
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('习题 5-13 图', canvas.width / 2, canvas.height - 10);
  </script>
</body>
</html>